<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todoList</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <!-- 输入框元素，用来新建待办列表 -->
        <form @submit.prevent="addTask">
            <span>新建任务</span>
            <input v-model="taskText" placeholder="请输入任务" />
            <button>添加</button>
        </form>
        <!-- 有序列表，用 v-for 循环渲染 -->
        <ol>
            <li v-for="(item, index) in todolist" :key="index">
                <!-- 直接显示任务 -->
                {{item}}
                <!-- 删除按钮，点击时调用 remove 方法 -->
                <button @click="remove(index)">删除任务</button>
                <!-- 任务内容，双击时调用 editTask 方法 -->
                <!-- <span @dblclick="editTask(index)">{{ item.text }}</span> -->
            </li>
            <hr/>
        </ol>
    </div>
</body>
<script>
    const App = Vue.createApp({
        data () {
            return {
                // 待办事项列表
                todolist: [],
                // 输入框的值
                taskText: ''
            }},
        methods: {
            addTask () {
                // 判断输入框是否为空
                if (this.taskText.length == 0) {
                    alert('请输入任务')
                    return
                } else {
                    // 添加待办事项
                    this.todolist.push(this.taskText)
                    // 清空输入框
                    this.taskText = ""
                }
            },
            remove (index) {
            // 删除待办事项(利用 splice 方法删除指定下标元素)
            // pop 方法只能删除最后一个元素
            // shift 方法只能删除第一个元素
                this.todolist.splice(index, 1)
            }
        }
    })
    App.mount('#app')
</script>
</html>
